<template>
	<view class="my-bg">
		<!-- <cu-custom :bgColor="mytheme" :isBack="false" textColor="#FFFFFF"> -->
		<cu-custom :isBack="false" textColor="#32383D">
			<block slot="backText">返回</block>
			<block slot="content" style="font-weight: 500;">个人中心</block>
		</cu-custom>

		<view class="top"></view>

		<!-- <view class="border-bottom avatar-wrap"> -->
		<view class="avatar-wrap">

			<!-- 老师名字ID区域	 -->
			<view class="title-wrap" v-if="userInfo.studentId != null || userInfo.userId != null">
				<view v-if="!userInfo.avatar">
					<view style="width: 120rpx; height: 120rpx;" class="title-img">
						<image :src="userInfo2.avatar" class="rounded-circle title-avatar">
						</image>
					</view>
				</view>
				<view v-else>
					<image :src="userInfo.avatar" style="width: 120rpx; height: 120rpx; border: 2rpx solid #fff;"
					class="rounded-circle title-avatar fl">
					</image>
				</view>
				<view class="name-id-wrap">
					<text>{{userInfo.user_nickname}}</text>
					<text class="id-wrap">手机号：{{userInfo.user_phoneNum}}</text>
					<text class="iconfont icon-jinrujiantou"></text>
				</view>
			</view>
			<view class="title-wrap" v-else>
				<view style="width: 120rpx; height: 120rpx;" class="title-img">
					<image :src="userInfo2.avatar" class="rounded-circle title-avatar">
					</image>
				</view>
				<view class="name-id-wrap" @click="loginto()">
					<text>{{userInfo2.user_nickname}}</text>
					<!-- <text class="id-wrap">手机号：{{userInfo2.user_phoneNum}}</text> -->
					<text class="id-wrap"></text>
					<text class="iconfont icon-jinrujiantou"></text>
				</view>
			</view>

		</view>

		<template>
			<view class="biaoqian01">
				<uni-grid :column="3" :show-border="false" :square="false" @change="change">
					<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
						<view class="grid-item-box">
							<image class="image" :src="item.url" mode="aspectFill" />
							<text class="text">{{item.text}}</text>
							<view v-if="item.badge" class="grid-dot">
								<uni-badge :text="item.badge" :type="item.type" size="small" />
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</template>

		<template>
			<view class="p-3" style="padding-top: 10px;">
				<!-- <view class="my-item" @click="zhiyexinyongdangan">
					<image class="userinfo-icon-img" src="../../static/hanjiaocai.png" mode="aspectFill"></image>
					<view class="userinfo-title-txt">职业信用档案</view>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#E4E4E4" type="arrowright" />
				</view> -->
				<!-- <view class="itemline"></view> -->
				<view class="my-item" @click="information">
					<image class="userinfo-icon-img" src="../../static/my/information.png" mode="aspectFill"></image>
					<view class="userinfo-title-txt">信息采集</view>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#E4E4E4" type="arrowright" />
				</view>
				<view class="itemline"></view>
				<view class="my-item" @click="updatePassword">
					<image class="userinfo-icon-img" src="../../static/my/passwoed_change.png" mode="aspectFill">
					</image>
					<view class="userinfo-title-txt">修改密码</view>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#E4E4E4" type="arrowright" />
				</view>
				<view class="itemline"></view>
				<view class="my-item" @click="aboutwe">
					<image class="userinfo-icon-img" src="../../static/my/about_us.png" mode="aspectFill"></image>
					<view class="userinfo-title-txt">关于我们</view>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#E4E4E4" type="arrowright" />
				</view>
				<view class="itemline"></view>
				<view class="my-item" @click="shezhiList">
					<image class="userinfo-icon-img" src="../../static/my/set.png" mode="aspectFill"></image>
					<view class="userinfo-title-txt">设置</view>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#E4E4E4" type="arrowright" />
				</view>
			</view>
		</template>
		<!-- 退出登录 -->
		<view>
			<view class="logout-button" v-if="userInfo.studentId != null || userInfo.userId != null">
				<button enabled="enabled" class="text-white"
					style="border-radius: 50rpx; border: 0; background: #3694EF; font-size: 32rpx; " type="primary"
					@click="logout">
					退出登录
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniGrid from '@/components/uni-ui/uni-grid/uni-grid/uni-grid.vue';
	import uniGridItem from '@/components/uni-ui/uni-grid/uni-grid-item/uni-grid-item.vue';
	import uniBadge from '@/components/uni-ui/uni-badge/uni-badge.vue';
	import uniIcons from '@/components/uni-ui/uni-icons/uni-icons.vue';
	const app = getApp();
	export default {
		components: {
			uniGrid,
			uniGridItem,
			uniBadge,
			uniIcons
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				// mytheme: '#1FDCA9', //全局颜色变量

				// 未登录之前显示
				userInfo2: {
					avatar: '/static/tabbar/me_avatar.png',
					user_nickname: '未登录',
					user_phoneNum: '未登录',
				},
				userInfo: {}, //登录之后显示

				list: [{
						url: '/static/my/myclass.png',
						text: '我的课程',
						badge: '0',
						// type: "primary"
						type: "error",
					},
					{
						url: '/static/my/mymoney.png',
						text: '我要赚钱',
						badge: '0',
						// type: "success"
						type: "error",
					},
					{
						url: '/static/my/myziliao.png',
						text: '完善资料',
						badge: '0',
						// type: "warning",
						type: "error",
					}
				],
			}
		},
		onShow: function() {
			this.userInfo = app.globalData.userinfo;
			console.log(this.userInfo.avatar)
			this.initJiaobiao();
		},
		methods: {
			initJiaobiao() {
				let dataInfo = {}
				if (app.globalData.userinfo.studentId != null && app.globalData.userinfo.studentId != "" && app.globalData
					.userinfo.studentId != undefined) {
					dataInfo.tingkedataDataSfzId = app.globalData.userinfo.studentId;
				}
				if (app.globalData.userinfo.llyId != null && app.globalData.userinfo.llyId != "" && app.globalData.userinfo
					.llyId != undefined) {
					dataInfo.lianluoyuanId = app.globalData.userinfo.llyId;
				}

				// 添加听课数据
				uni.request({
					url: app.globalData.serve_system_url + "getMyData",
					method: 'GET',
					data: dataInfo,
					success: res => {
						if (res.data.data.kechengCount != null) {
							this.list[0].badge = res.data.data.kechengCount.toString();
						}
						if (res.data.data.yongjinCount != null) {
							this.list[1].badge = res.data.data.yongjinCount.toString();
						}
						if (res.data.data.sfzInfoCount != null) {
							this.list[2].badge = res.data.data.sfzInfoCount.toString();
						}
					},
				});
			},
			loginto() {

				if (app.globalData.userinfo.studentId == null || app.globalData.userinfo.studentId == "" || app.globalData
					.userinfo.studentId == undefined) {
					uni.navigateTo({
						url: '../login/login'
					})
				} else {
					uni.navigateTo({
						url: '../user-userinfo/user-userinfo',
					});
				}
			},
			change(e) {
				let {
					index
				} = e.detail

				if (index == 0) {
					if (app.globalData.userinfo.studentId == null || app.globalData.userinfo.studentId == "" || app
						.globalData.userinfo.studentId == undefined) {

						if (app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" || app
							.globalData.userinfo.userId != undefined) {
							uni.showModal({
								title: "用户提示",
								content: "游客不能操作此模块",
								confirmColor: '#3694EF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {} else if (res.cancel) {}
								}
							});
						} else {
							uni.showModal({
								title: "登录提示",
								content: "请登录后，继续观看课程",
								showCancel: false,
								confirmColor: '#3694EF',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '../login/login'
										});
									} else if (res.cancel) {}
								}
							});
						}
					} else {
						uni.navigateTo({
							url: '../hasbuy/hasbuy',
						});
					}
				} else if (index == 1) {
					if (app.globalData.userinfo.llyId == null || app.globalData.userinfo.llyId == "" || app.globalData
						.userinfo.llyId == undefined) {
						uni.showModal({
							title: "登录提示",
							content: "请登录后，继续操作！",
							showCancel:false,
							confirmColor: '#3694EF',
							success: function (res) {
								if (res.confirm) {							
									uni.navigateTo({
										url: '../login/login_lly'
									});
								} else if (res.cancel) {
								}
							}
						});
					} else {
						uni.request({
							url: app.globalData.serve_job_url + 'getLianluoyuanInfo',
							method: 'GET',
							data: {
								'lianluoyuanId': app.globalData.userinfo.llyId
							},
							success: res => {
								if (res.data.data.lianluoyuanState == 1) {
									uni.navigateTo({
										url: '../../packageC/pages/news/newscopy',
									});
								} else if (res.data.data.lianluoyuanState == 0) {
									uni.showModal({
										title: '审批状态提示',
										content: '联络员状态审批中...',
										confirmColor: '#3694EF',
										showCancel: false,
										confirmText: '关闭'
									})
								} else if (res.data.data.lianluoyuanState == 2) {
									uni.showModal({
										title: '状态停用提示',
										content: '联络员状态已停用',
										confirmColor: '#3694EF',
										showCancel: false,
										confirmText: '关闭'
									})
								} else {
									uni.showModal({
										title: '系统提示',
										content: '系统错误，请稍后重试...',
										confirmColor: '#3694EF',
										showCancel: false,
										confirmText: '关闭'
									})
								}
							},
						});
					}
				} else if (index == 2) {
					if (
						!((app.globalData.userinfo.studentId != null && app.globalData.userinfo.studentId != "" && app
								.globalData.userinfo.studentId != undefined) ||
							(app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" && app
								.globalData.userinfo.userId != undefined))
					) {
						uni.showModal({
							title: "登录提示",
							content: "请登录后，完善个人资料",
							showCancel: false,
							confirmColor: '#3694EF',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../login/login'
									});
								} else if (res.cancel) {}
							}
						});
					} else {
						uni.navigateTo({
							url: '../user-userinfo/user-userinfo',
						});
					}
				}
			},
			// 修改密码
			updatePassword() {
				uni.showModal({
					title: "操作提示",
					content: "请联系管理员修改！",
					showCancel: false,
					confirmColor: '#3694EF',
					success: function(res) {
						if (res.confirm) {
							// uni.navigateTo({
							// 	url: '../login/login'
							// });										
						} else if (res.cancel) {}
					}
					// uni.navigateTo({
					// 	url: "../user-password/user-password"
					// })
				})
			},
			// 设置内页
			shezhiList() {
				uni.navigateTo({
					url: '../setting/setting',
					fail: () => {
						uni.showToast({
							title: '网络错误'
						});
					},
				});

			},
			// 关于我们
			aboutwe() {
				uni.navigateTo({
					url: '../about/about',
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '网络错误'
						});
					},
				});
			},
			// 信息采集
			information() {
				uni.navigateTo({
					url: '../img-upload-master/img-upload-master',
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '网络错误'
						});
					},
				});
			},
			//职业信用档案
			zhiyexinyongdangan() {
				uni.showActionSheet({
					itemList: ['职业信用查看', '职业信用录入'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								console.log("选择了职业信用查看");
								uni.navigateTo({
									url: './zyxyshow',
									fail: (err) => {
										console.log(err);
										uni.showToast({
											icon: 'none',
											title: '网络错误'
										});
									},
								})
								return;
							case 1:
								console.log("选择了职业信用录入");
								uni.navigateTo({
									url: './zyxyda?url=https://mp.weixin.qq.com/s/BxUnS4hrsi2dxaWG2x4afQ',
									// url: './zyxyda?url=https://wx.ccnuoxin.cn/credit/ProfessionalCredit/html/index.html',
									fail: (err) => {
										console.log(err);
										uni.showToast({
											icon: 'none',
											title: '网络错误'
										});
									},
								})
								return;
						}
					}
				})
			},
			// 退出登录
			logout() {
				app.globalData.userinfo.studentId = null;
				app.globalData.userinfo.userId = null;
				app.globalData.userinfo.llyId = null;
				app.globalData.userinfo.avatar = '';
				app.globalData.userinfo.user_nickname = '';
				app.globalData.userinfo.user_phoneNum = '';
				uni.removeStorage({
					key: 'userinfo',
					success: function(res) {
						uni.reLaunch({
							url: '../my/my',
						});
					}
				});
			}

		}
	}
</script>
<style>
	page {
		overflow: hidden;
		/*页面禁止滑动*/
	}

	.my-bg {
		height: 100vh;
		/* background: url('/static/my/my_bg.png'); */
		background: radial-gradient(circle farthest-side at 0 0,rgb(214, 244, 254) 0%,rgb(255, 255, 255) 100%) no-repeat;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.itemline {
		margin-left: 5rpx;
		margin-right: 5rpx;
		height: 2rpx;
		/* background-color: #CCCCCC; */
		background-color: #F3F4F5;
	}

	.top {
		height: 60rpx;
		width: 100%;
		/* background-color: #1FDCA9; */
	}

	.my-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		margin-top: 20rpx;
		/* color: #1FDCA9; */
	}

	.userinfo-title-txt {
		margin-left: 20rpx;
		color: #000000;
	}

	.uni-icon-wrapper {
		position: absolute;
		right: 20rpx;
	}

	.userinfo-icon-img {
		width: 40rpx;
		height: 40rpx;
	}

	.title-wrap {
		display: block;
		width: 92%;
		height: 61%;
		margin: 0 auto;
	}

	.avatar-wrap {
		/* background-color: #1FDCA9; */
		height: 130rpx;
	}

	.title-img {
		background-color: #9BCBFF;
		border: 3px solid #fff;
		border-radius: 50%;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title-avatar {
		height: 70rpx;
		width: 70rpx;
	}

	.fl {
		float: left;
	}

	.name-id-wrap {
		width: 79%;
		height: 100%;
		float: left;
		/* background-color: #1FDCA9; */
		position: relative;
		/* color: #FFFFFF; */
		color: #151617;
		margin-left: 20rpx;
	}

	.name-id-wrap text:first-child {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
	}

	.name-id-wrap text:nth-child(2) {
		display: block;
		margin-top: 10rpx;
	}

	.name-id-wrap text:nth-child(3) {
		position: absolute;
		right: 20rpx;
		top: 30%;
		/* color: #FFFFFF; */
		color: #83878A;
	}

	.id-wrap {
		font-size: 20rpx;
	}

	.image {
		width: 40px;
		height: 40px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		/* position: relative; */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 30px;
	}

	.biaoqian01 {
		margin: 0 10px;
		margin-top: 15px;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.logout-button {
		width: 92%;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>